<template>
  <div class="home">
    <el-container>
      <el-header>
        <nav-menu/>
        <div class="acatar">
          <user-avatar/>
        </div>
      </el-header>
        <el-container>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from './child/NavMenu'
import UserAvatar from './child/UserAvatar'
export default {
  name: 'Home',
  components: {
    NavMenu,
    UserAvatar,
  },
}
</script>

<style lang="scss" scoped>
  $header-height:60px;

  .el-header{
    position: relative;
    text-align: center;
    line-height: $header-height;
    padding: 0;
    box-shadow: 0 0 8px rgba(0,0,0,.4);
    .acatar {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .el-main {
    padding: 0;
    text-align: center;
    height: calc(100vh - #{$header-height});
  }

  body>.el-container {
    margin-bottom: 40px;
  }
</style>